<template>
        <div class="book-list">
          <div class="book-list-nav">
               <router-link :to="{name:'bookList'}">
                   我的书单
                </router-link  >
                 <router-link :to="{name:'borrwBook'}" >
                   在借书籍
                </router-link>
                 <router-link :to="{name:'readList'}" >
                   阅读记录
                </router-link>
          </div>           
            <div class="book-list-container">
                <router-view></router-view>
            </div>
        </div>
  
</template>
<script>
export default {
    data(){
        return{
            nav:["我的书单","在借书籍","阅读记录"],
            curNavIndex:0,
            tableData:null,

        }
    },
    methods:{
     
   async getBooklist(url,bookStatus=-1){//

        let params ={};
            if(bookStatus !== -1){
                params.bookStatus = bookStatus;
            }
         const result =  await this.$axios.get(url,{
                    params
                });
        return result;
   }
    }
    
}
</script>
<style lang="less">
.book-list{

    width: 100%;
    @media screen and (max-width:400px) {
        .book-list-nav{
             overflow-x:scroll;
        }
    }
    .book-list-container{
        position: relative;
        top: 45px;
        
    }
    
    .book-list-nav{
        width: 100%;
        // overflow-x:scroll;
        display: flex;
        // justify-content: start;
       border-bottom: 1px solid #EBEEF5;
        color:rgb(10, 10, 10);
        height: 30px;
        padding: 5px;
        position:fixed;
        top: 160px;
        z-index: 999;
        a:hover,.router-link-active{
            font-weight: 700;
        }
        a{
            display: inline-block;
            white-space: nowrap;
            color: rgb(5, 5, 5);
            height: 100%;
            width: 100px;
           // text-align:center;
            margin-left: 30px;
            cursor: pointer;
        }
    }
}
</style>